import React from "react";
import { Layout, Avatar, Button, Dropdown } from "antd";
import { MenuFoldOutlined } from "@ant-design/icons";
import './index.css'
import { useDispatch } from 'react-redux'
import { collapseMenu } from '../../store/reducers/tab'
import { useNavigate } from "react-router-dom";

const { Header } = Layout;

const CommonHeader = ({ collapsed }) => {
    const navigate = useNavigate()

    // 登出
    const logout = () => {
        // 清除token
        localStorage.removeItem('token')
        localStorage.removeItem('userId')
        navigate('/login')
    }
    const items = [
        {
            key: '1',
            label: (
                <a onClick={() => navigate('/profile')} target="_blank" rel="noopener noreferrer">
                    个人信息
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a onClick={() => logout()} target="_blank" rel="noopener noreferrer">
                    退出
                </a>
            ),
        }
    ]
    // 创建dispatch
    const dispatch = useDispatch()
    // 点击展开收起按钮
    const setCollapsed = () => {
        console.log(collapsed)
        dispatch(collapseMenu())
    }
    return (
        <Header className="header-container">
            <Button
                type="text"
                icon={ <MenuFoldOutlined /> }
                style={{
                  fontSize: '16px',
                  width: 64,
                  height: 32,
                  background: '#fff'
                }}
                onClick={() => setCollapsed() }
            />
            <Dropdown
                menu={{ items }}
            >
                <Avatar
                    size={36}
                    src={<img src={require('../../assets/images/user_default.png')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />}
                />
            </Dropdown>

        </Header>
    )
}

export default CommonHeader